<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css"
	href="${path }/static/css/allclothes.css">
</head>
<script type="text/javascript">
	var msg = '${msg}'
	if (msg != null || msg != "") {
		alert(msg);
	}
</script>
<body>

	 <a href="${path }/ToIndexServlet?userid=${userid }"><div class="hd"></div></a>
	<form method="get" action="${path }/DoSelectServlet">
	<input type="hidden" value="${userid }" name="userid"/>
		<div class=" Search">
			<input id="searchInput" class="search-input" type="text"
				placeholder="搜索其他喜欢的衣服" name="SelectText"> <input
				type="submit" value="搜索" class="search-btn btn">
		</div>
	</form>
	<div id="main">
		<div class="demo">
			<c:forEach items="${lc }" var="lc">
				<div class="box">
					<a
						href="${path }/ToShowCommodity?userid=${userid }&comid=${lc.comid }">
						<img src="static/images/${lc.image }.jpg" width="250" height="300" />
						<h4>
							¥<span>${lc.price}</span>
						</h4>
						<p>${lc.com_name}</p>
					</a> <a
						href="${path }/DoAddShoppingCart?comid=${lc.comid }&userid=${userid }"
						class="button orange addcar">加入购物车</a>
				</div>
			</c:forEach>
		</div>
	</div>
	<div class="m-sidebar">
		<div class="me">
			<i id="end"></i> <a href="${path }/ToMe?userid=${userid }"><span class="carstext">个人中心</span></a>
		</div>
		<div class="cart">
			<i id="end"></i> <a href="${path }/ToShoppingCart?userid=${userid }"><span class="carstext">购物车</span></a>
		</div>
		<div class="scj">
			<i id="end"></i> <a href="${path }/ToFavorite?userid=${list.userid }"><span
				class="carstext">收藏夹</span></a>
		</div>
	</div>
	<div id="msg">已成功加入购物车！</div>
	</div>
	<div style="text-align: center; clear: both;">
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	</div>
	</div>
</body>
<script type="text/javascript" src="${path }/static/js/jquery.min.js"></script>
<script>
	$(function() {
		var offset = $("#end").offset();
		$(".addcar").click(
				function(event) {
					var addcar = $(this);
					var img = addcar.parent().find('img').attr('src');
					var flyer = $('<img class="u-flyer" src="'+img+'">');
					flyer.fly({
						start : {
							left : event.pageX,
							top : event.pageY
						},
						end : {
							left : offset.left + 10,
							top : offset.top + 10,
							width : 0,
							height : 0
						},
						onEnd : function() {
							$("#msg").show().animate({
								width : '250px'
							}, 200).fadeOut(1000);
							addcar.css("cursor", "default").removeClass(
									'orange').unbind('click');
							this.destory();
						}
					});
				});

	});
</script>
</html>
